<template>
  <div>
    <MySearch class="search" :name="name" :state="state" @search="search">
    </MySearch>
    <el-button
      icon="el-icon-circle-plus-outline"
      type="warning"
      @click="isShow = true"
      >新建
    </el-button>

    <addForm :visible.sync="isShow"></addForm>
    <template>
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="taskCode" label="工单编号" width="140">
        </el-table-column>
        <el-table-column prop="innerCode" label="设备编号" width="160">
        </el-table-column>
        <el-table-column prop="taskType.typeName" label="工单类型" width="140">
        </el-table-column>
        <el-table-column prop="createType" label="工单方式" width="140">
          <template v-slot="{ row }">
            <span>
              {{ row.createType === 0 ? "自动" : "手动" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="taskStatusTypeEntity.statusName"
          label="工单状态"
          width="140"
        >
        </el-table-column>
        <el-table-column prop="userName" label="运营人员" width="140">
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期" width="200">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }"
            ><span class="chakan" @click="detail(row)">查看详情</span></template
          >
        </el-table-column>
      </el-table>

      <!-- 放置分页组件 -->
      <div class="block">
        <el-pagination
          @size-change="getTaskList"
          @current-change="getTaskList"
          :current-page.sync="params.pageIndex"
          :page-sizes="[10, 20, 30, 40]"
          :page-size.sync="params.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </template>
    <el-dialog
      title="工单详情"
      :visible.sync="dialogVisible"
      width="50%"
      v-loading="loading"
    >
      <h2>
        {{
          details.taskStatusTypeEntity &&
          details.taskStatusTypeEntity.statusName
        }}
      </h2>
      <div class="details">
        <ul>
          <li>设备编号:{{ details.innerCode }}</li>
          <li>取消日期:{{ details.updateTime }}</li>
          <li>
            工单类型:{{ details.taskType ? details.taskType.typeName : "" }}
          </li>
          <li>工单方式:{{ details.createType === 0 ? "自动" : "手动" }}</li>
        </ul>
        <ul>
          <li>创建日期:{{ details.createTime }}</li>
          <li>运营人员:{{ details.userName }}</li>
          <li>补货数量:</li>
          <li>取消原因:{{ details.desc }}</li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer" v-show="buttoshow">
        <el-button v-if="cancleShow" size="mini" type="text" @click="cancle"
          >取消工单</el-button
        >
        <el-button v-else size="mini" type="text">重新创建</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import MySearch from '@/components/MySearch'
import { getTaskListApi, cancleUserApi, getTaskInfo } from '@/api/yunying'
import addForm from '@/components/addForm.vue'
export default {
  name: 'LikedeYuying',
  components: { MySearch, addForm },
  data () {
    return {
      name: '工单编号：',
      state: '工单状态：',
      tableData: [],
      params: {
        pageIndex: 1,
        pageSize: 10,
        isRepair: true
      },
      total: 0,
      loading: false,
      isShow: false,
      dialogVisible: false,
      details: {},
      cancleShow: false,
      buttoshow: true
    }
  },

  async created () {
    this.getTaskList()
  },

  methods: {
    async getTaskList () {
      try {
        this.loading = true
        const { currentPageRecords, totalCount } = await getTaskListApi(
          this.params
        )
        const res = await getTaskListApi(this.params)
        console.log(res)
        this.tableData = currentPageRecords
        this.total = +totalCount
      } catch (error) {
      } finally {
        this.loading = false
      }
    },
    search (val) {
      console.log(val)
      this.tableData = this.tableData.filter((ele) => ele.taskCode === val)
      console.log(this.tableData)
    },
    async detail (row) {
      try {
        this.dialogVisible = true
        this.row = row
        console.log(this.row.taskId)
        this.loading = true
        this.details = await getTaskInfo(this.row.taskId)
        console.log(this.details)
        if (this.details.taskStatusTypeEntity.statusName === '待办') {
          this.cancleShow = true
          this.buttoshow = true
        } else if (this.details.taskStatusTypeEntity.statusName === '取消') {
          this.cancleShow = false
          this.buttoshow = true
        } else {
          this.buttoshow = false
        }
      } finally {
        this.loading = false
      }
    },
    async cancle () {
      await this.$confirm('取消工单后，将不能恢复，是否确认取消吗', '提示', {
        type: 'warning'
      })
      await cancleUserApi(this.row.taskId)
      this.$message.success('取消成功')
      this.details.taskStatusTypeEntity.statusName = '取消'
      this.getEmployees()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .search {
  height: 64px;
  display: flex;
  justify-content: start;
  // background-color: pink;
}
::v-deep .chakan {
  color: #5f84ff;
  cursor: pointer;
}
.details {
  display: flex;
  justify-content: space-between;
  ul {
    list-style: none;
    li {
      margin-bottom: 10px;
    }
  }
}
</style>
